{% include 'base.html' %}

<style>
    .role-detail {
        background: white;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-top: 20px;
    }

    .role-header {
        display: flex;
        gap: 20px;
        margin-bottom: 30px;
    }

    .role-avatar {
        width: 200px;
        height: 300px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    }

    .role-basic {
        flex: 1;
    }

    .role-name {
        font-size: 28px;
        margin-bottom: 15px;
        color: #2c3e50;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .info-item {
        padding: 8px 12px;
        background-color: #f8f9fa;
        border-radius: 4px;
    }

    .info-label {
        font-weight: 500;
        color: #666;
    }

    .category-section {
        margin: 30px 0;
    }

    .category-title {
        font-size: 18px;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 2px solid #f0f0f0;
        color: #34495e;
    }

    .items-container {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    .item-card {
        background: #f8f9fa;
        border-radius: 6px;
        padding: 10px;
        width: 150px;
        text-align: center;
        transition: transform 0.2s;
    }

    .item-card:hover {
        transform: scale(1.05);
    }

    .item-card img {
        width: 100%;
        height: 100px;
        object-fit: cover;
        border-radius: 4px;
        margin-bottom: 8px;
    }
</style>

<div class="role-detail">
    <div class="role-header">
        <img src="{{url_for('static',filename=role.photo_path) }}" class="role-avatar">
        <div class="role-basic">
            <h1 class="role-name">{{role.name}}</h1>
            <div class="info-grid">
                <div class="info-item">
                    <span class="info-label">性别：</span>{{role.xing_bie}}
                </div>
                <div class="info-item">
                    <span class="info-label">原名：</span>{{role.yuan_ming}}
                </div>
                <div class="info-item">
                    <span class="info-label">身高：</span>{{role.shen_gao}}
                </div>
                <div class="info-item">
                    <span class="info-label">体重：</span>{{role.ti_zhong}}
                </div>
                <div class="info-item">
                    <span class="info-label">发色：</span>{{role.fa_se}}
                </div>
                <div class="info-item">
                    <span class="info-label">瞳色：</span>{{role.tong_se}}
                </div>
                <div class="info-item">
                    <span class="info-label">生日：</span>{{role.sheng_ri}}
                </div>
            </div>
            <div class="info-item">
                <span class="info-label">简介：</span>{{role.jian_jie}}
            </div>
            <div class="info-item">
                <span class="info-label">故事：</span>{{role.gu_shi}}
            </div>
            <div class="info-item">
                <span class="info-label">飞升：</span>{{role.fei_sheng}}
            </div>
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">稀有度</h2>
        <div class="items-container">
            {% for xi_you_du in role.xi_you_dus %}
            <a href="{{url_for('show_smodel', smodel_type_name='Xi_you_du', id=xi_you_du.id)}}" class="item-card">
                <img src="{{url_for('static',filename=xi_you_du.photo_path) }}">
                <div>{{xi_you_du.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">标签</h2>
        <div class="items-container">
            {% for tag in role.tags %}
            <a href="{{url_for('show_smodel', smodel_type_name='Tag', id=tag.id)}}" class="item-card">
                <img src="{{url_for('static',filename=tag.photo_path) }}">
                <div>{{tag.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">性格</h2>
        <div class="items-container">
            {% for xing_ge in role.xing_ges %}
            <a href="{{url_for('show_smodel', smodel_type_name='Xing_ge', id=xing_ge.id)}}" class="item-card">
                <img src="{{url_for('static',filename=xing_ge.photo_path) }}">
                <div>{{xing_ge.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">星球</h2>
        <div class="items-container">
            {% for xing_qiu in role.xing_qius %}
            <a href="{{url_for('show_smodel', smodel_type_name='Xing_qiu', id=xing_qiu.id)}}" class="item-card">
                <img src="{{url_for('static',filename=xing_qiu.photo_path) }}">
                <div>{{xing_qiu.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">阵营</h2>
        <div class="items-container">
            {% for zhen_ying in role.zhen_yings %}
            <a href="{{url_for('show_smodel', smodel_type_name='Zhen_ying', id=zhen_ying.id)}}" class="item-card">
                <img src="{{url_for('static',filename=zhen_ying.photo_path) }}">
                <div>{{zhen_ying.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">突破材料</h2>
        <div class="items-container">
            {% for tu_po_cai_liao in role.tu_po_cai_liaos %}
            <a href="{{url_for('show_smodel', smodel_type_name='Tu_po_cai_liao', id=tu_po_cai_liao.id)}}" class="item-card">
                <img src="{{url_for('static',filename=tu_po_cai_liao.photo_path) }}">
                <div>{{tu_po_cai_liao.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">技能</h2>
        <div class="items-container">
            {% for ji_neng in role.ji_nengs %}
            <a href="{{url_for('show_smodel', smodel_type_name='Ji_neng', id=ji_neng.id)}}" class="item-card">
                <img src="{{url_for('static',filename=ji_neng.photo_path) }}">
                <div>{{ji_neng.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">武器</h2>
        <div class="items-container">
            {% for weapon in role.weapons %}
            <a href="{{url_for('show_smodel', smodel_type_name='Weapon', id=weapon.id)}}" class="item-card">
                <img src="{{url_for('static',filename=weapon.photo_path) }}">
                <div>{{weapon.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">属性</h2>
        <div class="items-container">
            {% for shu_xing in role.shu_xings %}
            <a href="{{url_for('show_smodel', smodel_type_name='Shu_xing', id=shu_xing.id)}}" class="item-card">
                <img src="{{url_for('static',filename=shu_xing.photo_path) }}">
                <div>{{shu_xing.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">刻印</h2>
        <div class="items-container">
            {% for ke_yin in role.ke_yins %}
            <a href="{{url_for('show_smodel', smodel_type_name='Ke_yin', id=ke_yin.id)}}" class="item-card">
                <img src="{{url_for('static',filename=ke_yin.photo_path) }}">
                <div>{{ke_yin.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">称号</h2>
        <div class="items-container">
            {% for cheng_hao in role.cheng_haos %}
            <a href="{{url_for('show_smodel', smodel_type_name='Cheng_hao', id=cheng_hao.id)}}" class="item-card">
                <img src="{{url_for('static',filename=cheng_hao.photo_path) }}">
                <div>{{cheng_hao.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">魂印</h2>
        <div class="items-container">
            {% for hun_yin in role.hun_yins %}
            <a href="{{url_for('show_smodel', smodel_type_name='Hun_yin', id=hun_yin.id)}}" class="item-card">
                <img src="{{url_for('static',filename=hun_yin.photo_path) }}">
                <div>{{hun_yin.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">配队推荐</h2>
        <div class="items-container">
            {% for pei_dui_tui_jian in role.pei_dui_tui_jians %}
            <a href="{{url_for('show_smodel', smodel_type_name='Pei_dui_tui_jian', id=pei_dui_tui_jian.id)}}" class="item-card">
                <img src="{{url_for('static',filename=pei_dui_tui_jian.photo_path) }}">
                <div>{{pei_dui_tui_jian.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="category-section">
        <h2 class="category-title">武器推荐</h2>
        <div class="items-container">
            {% for wu_qi_tui_jian in role.wu_qi_tui_jians %}
            <a href="{{url_for('show_smodel', smodel_type_name='Wu_qi_tui_jian', id=wu_qi_tui_jian.id)}}" class="item-card">
                <img src="{{url_for('static',filename=wu_qi_tui_jian.photo_path) }}">
                <div>{{wu_qi_tui_jian.name}}</div>
            </a>
            {% endfor %}
        </div>
    </div>
</div>